<template>
	<div class="container">
		<JxNavbar title='我的动态' />
		<headerVue />

		<div class="list">
			<div class="list-item" v-for="(item, index) in listData" :key="item['_id']" @click="toDetail(item['_id'])">
				<div class="item-header">
					<text>{{ item['shortDate'] }}</text>
					<i class="iconfont icon-more" @click.stop="deleteItem(item)"></i>
				</div>
				<div class="item-content">
					<view class="title">{{ item['title'] }}</view>
					<div class="body">{{ item['body'] }}</div>
					<div class="images" v-if="item['cover']['length']">
						<image :src='item' v-for="(item, index) in item['cover']" :key="index" @click.stop="previewImage(index)" mode="aspectFill"
							class="image-item" lazy-load />
					</div>
				</div>

				<div class="item-community">
					<div class="community-item">
						<text>{{ item['comment_count'] }}</text>
						<text>互动</text>
					</div>
					<div class="community-item">
						<text>{{ item['collection_count'] }}</text>
						<text>收藏</text>
					</div>
					<div class="community-item">
						<text>{{ item['like_count'] }}</text>
						<i class="icon-dianzan iconfont"></i>
					</div>
				</div>

				<div class="item-topic" @click.stop="toMenu(item['menu']['menu_id'])">
					<div class="topic-left choose">
						<image :src="$surl('/publish/topic-title.png')" mode="widthFix" />
						<text>{{ item['menu']['name'] }}</text>
					</div>
					<i class="iconfont icon-right"></i>
				</div>
			</div>
		</div>

		<JxLoadMore :list="listData" :loadStatus='loadStatus' />
	</div>
</template>

<script setup>
import { ref, computed } from 'vue'
import file from '@/utils/file/index.js'
import tools from '@/utils/tools/index.js'
import articles from '@/api/articles/index.js'
import JxNavbar from '@/components/navbar/index.vue'
import headerVue from './components/header.vue'
import { onReachBottom } from '@dcloudio/uni-app';
import JxLoadMore from '@/components/LoadMore/index.vue'

const page = ref(1);
const listData = ref([]);
const loadStatus = ref('loadmore')

async function initData() {
	page.value = 1;
	tools.loading('page');
	listData.value = await getList();
	uni.hideLoading()
}

async function getList() {
	loadStatus.value = 'loading'
	const response = await articles.myDynamic({ page: page.value, limit: 10 });
	if (response['code'] == 200) {
		const list = response['data'].map(item => {
			item['cover'] = file.getFileUrls(item['cover']);
			item['user']['avatar'] = file.getFileUrl(item['user']['avatar']);
			item['shortDate'] = tools.shortDate(item['create_date'])
			return item;
		})
		loadStatus.value = list.length < 10 ? 'nomore' : 'loadmore';
		return list;
	}
	return [];
}

function previewImage(index) {
	uni.previewImage({
		current: index,
		urls: props.item.cover
	})
}

async function deleteItem(item) {
	uni.showActionSheet({
		itemList: ['删除'],
		success: async ({ tapIndex }) => {
			if (tapIndex === 0) {
				const response = await articles.delete({ article_id: item['_id'] });
				if (response['code'] === 200) {
					listData.value = listData.value.filter(itemL => itemL['_id'] !== item['_id']);
					tools.toast({ title: '删除成功' })
				}
			}
		}
	})
}

function toDetail(id) {
	uni.navigateTo({
		url: '/pages/sub/main/detail/index?id=' + id
	})
}

function toMenu(id) {
	uni.navigateTo({
		url: '/pages/sub/main/list/index?id=' + id
	})
}

onReachBottom(async () => {
	if (loadStatus.value === 'loadmore') {
		page.value++;
		const list = await getList();
		listData.value = listData.value.concat(list);
	}
})

initData()
</script>

<style lang="scss" scoped>
.container {
	background: $uv-bg-color;

	.list {
		padding: 0 $side-width;
		margin-top: $side-width;

		.list-item {
			background: #fff;
			padding: $side-width;
			border-radius: 5px;
			margin-bottom: $side-width ;

			&:last-child {
				margin-bottom: 0;
			}

			.item-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				color: $uv-tips-color;

				.iconfont {
					padding-left: $side-width;
					font-size: 40rpx;
					color: $uv-main-color;
				}
			}

			.item-content {
				margin-top: 18rpx;

				.title {
					font-size: 32rpx;
					font-weight: 600;
					line-height: 44rpx;
				}

				.body {
					box-sizing: border-box;
					line-height: 46rpx;
					margin-top: 10rpx;
					width: 100%;
				}

				.images {
					display: flex;
					flex-wrap: wrap;

					.image-item {
						width: 208rpx;
						height: 208rpx;
						border-radius: 3px;
						margin-top: 14rpx;
						margin-right: 14rpx;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}

			.item-community {
				display: flex;
				align-items: center;
				color: $uv-tips-color;
				justify-content: space-between;
				padding: $side-width 0;

				.community-item {
					display: flex;
					align-items: center;

					text:first-child {
						padding-right: 4rpx;
					}

					.icon-dianzan {
						font-size: 36rpx;
					}
				}
			}

			.item-topic {
				width: 100%;
				height: 118rpx;
				border-radius: 3px;
				padding: 0 $side-width;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				box-sizing: border-box;
				background: $uv-bg-color;

				.topic-left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						margin-left: 6px;
					}
				}

				.icon-right {
					font-size: 26rpx;
					color: $uv-tips-color;
				}
			}
		}
	}
}
</style>